<template>
<div class="grid">
   <mu-row gutter>
    <mu-col desktop="25"></mu-col>
    <mu-col desktop="50" class="box">
      
      <mu-paper>
        <div class="head-box">
          <simple-image-upload :imgsize="120" :resultPicture.sync="user_thumbnail"></simple-image-upload>
          <span>头像</span>
        </div>        
        <mu-divider/>
        <mu-text-field hintText="用户名" class="divider-form" :underlineShow="false" v-model="user_name" />
        <mu-divider/>
        <mu-text-field hintText="微信昵称" class="divider-form" :underlineShow="false" v-model="user_nickname"/>
        <mu-divider/>
        <mu-select-field hintText="性别" v-model="user_sex" fullWidth class="divider-sex divider-form"  :underlineShow="false" >
          <mu-menu-item value="1" title="男"/>
          <mu-menu-item value="2" title="女"/>
        </mu-select-field>
        <mu-divider/>
        <mu-text-field v-model="user_password" hintText="密码"disabled class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user_wechat_id" hintText="微信号" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user_mobile_phone" hintText="手机号" type="tel" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user_province" hintText="省" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user_city" hintText="城市" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user_money" type="number" hintText="金币" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user_rank" type="number" hintText="等级" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <div class="switch-box">
          <mu-switch label="私信" labelLeft v-model="allowChat"/>
        </div>
        <mu-divider/>
        <mu-raised-button label="添加" class="button" @click="addUser" />
      </mu-paper>
    </mu-col>
    <mu-col desktop="25"></mu-col>
  </mu-row>
   <mu-toast v-if="toast" message="添加成功" @close="hideToast"/>
</div>
</template>
<script>
  import SimpleImageUpload from '../../components/imageUpload/simple-image-upload.vue'
  import http from "../../http/http.js" 
  export default {
    data () {
      return {
        user_thumbnail: '',
        user_name:'',
        user_nickname:'',
        user_sex:'',
        user_password:'',
        user_wechat_id:'',
        user_mobile_phone:'',
        user_province:'',
        user_city:'',
        user_money:'',
        user_rank:'',
        user_allow_chat:'',
        allowChat:false,

        addUrl:this.config.userUrl,//添加用户的地址

        toast: false,
      }
    },
    components : {
      SimpleImageUpload
    },
    methods: {
      addUser: function(){    

        var that = this
        if(this.allowChat)
          this.user_allow_chat = 1
        else
         this.user_allow_chat = 0
        var user_data = {
          user_thumbnail:this.config.adminUrl+'/uploads/images/head/'+this.user_thumbnail,
          user_name:this.user_name,
          user_nickname:this.user_nickname,
          user_sex:this.user_sex,
          user_password:this.user_password,
          user_wechat_id:this.user_wechat_id,
          user_mobile_phone:this.user_mobile_phone,
          user_province:this.user_province,
          user_city:this.user_city,
          user_money:this.user_money,
          user_rank:this.user_rank,
          user_allow_chat:this.user_allow_chat,
          user_type:1
        }
        let param = new FormData(); 
        param.append('user_data',user_data);
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };  //添加请求头
        http.post(that.addUrl,{
          user_data:user_data
        })
        .then(function(response){
          that.showToast();
          // console.log(response)
        })
        .catch(function(err){console.log(err)});
      },
      //消息提示
      showToast:function () {
        this.toast = true
        this.user_thumbnail= ''
        this.user_name=''
        this.user_nickname=''
        this.user_sex=''
        this.user_password=''
        this.user_wechat_id=''
        this.user_mobile_phone=''
        this.user_province=''
        this.user_city=''
        this.user_money=''
        this.user_rank=''
        this.user_allow_chat=''
        this.allowChat=false

        if (this.toastTimer) clearTimeout(this.toastTimer)
        this.toastTimer = setTimeout(() => { this.toast = false }, 2000)
      },
      hideToast:function() {
        this.toast = false
        if (this.toastTimer) clearTimeout(this.toastTimer)
      }
    },
    mounted() {
      
    },
  }
</script>

<style lang="css">
.box{
  padding:40px;
}
.head-box{
  margin: 0 auto;
  display: flex;
}
.head-box span{
  margin:35px 30px; 
  font-size: 30px;
  color:#E1E1E1;
}
.divider-form {
  width: 100%;
  margin-bottom: 0;
  padding-left: 20px;
}
.divider-form input{
  width: 100%;
}
.divider-sex{
  height:48px;
}
.switch-box{
  padding:15px 20px;
}
.button{
  width: 100%;
  background: #03a9f4;
}
</style>